<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>Checkout Cart</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1271093_okvregz66u.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog.css">
    <link rel="stylesheet" href="./css/mobile/cart.css">
    <link rel="stylesheet" href="./css/mobile/color_scheme.css">

    <script src="//at.alicdn.com/t/font_1271093_okvregz66u.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<script>
    (function(doc, win) {
        var docEl = doc.documentElement,
                isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                dpr = 1,
                scale = 1 / dpr,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function() {
            var width = docEl.clientWidth;
            if (width / dpr > 750) {
                width = 750 * dpr;
            }
            // 乘以100，px : rem = 100 : 1
            docEl.style.fontSize = 100 * (width / 750) + 'px';

            // 375px ,rem = 50，1
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
</script>
<body>
<div class="container-fluid header">
    <div id="logo">
        <a href="index.html">
            <img src="./image/logo-270x44.png" alt="Komembers Shop" title="Komembers Shop" class="logo-2x">
        </a>
    </div>
    <ul class="list-inline nav-tabs">
        <li class="pull-left category"><i class="iconfont iconbtn-mweb-category"></i></li>
        <li class="pull-right"><i class="iconfont iconbtn-mweb-cart"></i></li>
        <li class="clearfix"></li>
    </ul>
</div>
<div class="dialog-vertical" data-spm="dialog">
    <div class="dialog-wrapper"></div>
    <div class="dialog dialog-popup">
        <div class="dialog-content">
            <div class="dialog-header">
                <div class="mlr-15 text-center line-center">
                    <ul class="list-inline nav-tabs">
                        <li class="pull-left"><i class="iconfont iconbtn-mweb-back"></i></li>
                        <li class="pull-right"><i class="iconfont iconbtn-mweb-search"></i></li>
                        <li class="clearfix"></li>
                    </ul>
                    <div class="dialog-avatar"><i class="iconfont iconbtn-mweb-logindefault"></i></div>
                    <div class="dialog-login ml-10 btn-login">Sign in/Sign up</div>
                    <nav id="bottom-tab-menu">
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-wishlist"></i>
                                <div class="name">Wishlist</div>
                            </a>
                        </div>
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-freeshipping"></i>
                                <div class="name">Free Shipping</div>
                            </a>
                        </div>
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-dailydeals"></i>
                                <div class="name">Daily Deals</div>
                            </a>
                        </div>
                    </nav>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="border"></div>
            <div class="dialog-category-list dialog-central mlr-15">
                <ul class="catetory-list">
                    <li>Home</li>
                    <li>Skin Care</li>
                    <li>Sun Care</li>
                    <li>Man’s</li>
                    <li>Body and Hair</li>
                    <li>Lip Make up</li>
                    <li>Serum</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    $('.category').click(function () {
        $('.dialog-vertical').addClass('dialog-show')
        $(document).find('body').addClass('overflowHide')

    })

    $('.dialog-wrapper').click(function () {
        $('.dialog-vertical').removeClass('dialog-show')
        $(document).find('body').removeClass('overflowHide')
    })
</script>

<style>
    .header {
        border-bottom: 0.02rem solid rgba(38,50,56,0.12);
    }
    .checkout-cart .box-heading {
        height: 1.68rem;
        border-bottom: 0.02rem solid rgba(38,50,56,0.12);
    }
    .checkout-cart .box-heading h3{
        line-height: 1.68rem;
        font-size: 0.4rem;
        color: #1D1919;
        letter-spacing: 0.0166rem;
    }
    .checkout-cart .pro-img {
        border: solid 0.02rem #eee;
    }

    .checkout-cart .panel-group h2 {
        font-size: 0.36rem;
    }
    .checkout-cart .panel-group p {
        margin-top: 0.2rem;
        letter-spacing: 0;
        font-size: 0.28rem;
    }
    .checkout-cart .panel-group .code {
        color: #999;
    }

    .checkout-cart .panel-group input.form-control {
        background-color: #F5F5F5;
        border-radius: 0.08rem;
    }
    .checkout-cart .panel-total {
        background-color: #F5F5F5;
        border-radius: 0.08rem;
        padding: 0.4rem 0.2rem;
    }

    .checkout-cart .panel-total > div > div{
        line-height: 0.6rem;
    }
    .checkout-cart .panel-total .total .panel-title{
        font-size: 0.36rem;
        font-weight: bold;
    }

    .checkout-cart .buttons .btn{
        margin: 0.4rem 0;
        line-height: 0.5rem;
        height: 1rem;
        width: 3.42rem;
        float: left;

    }
</style>

<div class="container-fluid checkout-cart main">
    <div class="row clearfix">
        <div class="row col-md-12 m-p-0 mlr-12">
            <div class="box-heading">
                <h3>Shopping Cart</h3>
            </div>
            <div class="cart-list">
                <div class="cart-item mt-30">
                    <div class="pro-img cell mr-16"><img src="./image/2.jpg" class="img-responsive"></div>
                    <div class="pro-info cell">
                        <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>
                        <div class="pro-option mt-5">M01_듀이 로즈</div>
                        <div class="pro-price mt-24">
                            <div class="new-price  pull-left">$ 1,316,000</div>
                            <div class="old-price pull-left">$ 1,880,000</div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="pro-warp mt-24">
                            <div class="delete pull-left"><i class="iconfont iconbtn-delete"></i></div>
                            <div class="quantity-info pull-right">
                            <span class="qty">
                                    <input type="text" name="quantity" value="1" size="2" data-min-value="1" id="input-quantity" class="form-control">
                                    <a class="clearfix"></a>
                                </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="cart-item mt-30">
                    <div class="pro-img cell mr-16"><img src="./image/3.jpg" class="img-responsive"></div>
                    <div class="pro-info cell">
                        <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>
                        <div class="pro-option mt-5">M01_듀이 로즈</div>
                        <div class="pro-price mt-24">
                            <div class="new-price  pull-left">$ 1,316,000</div>
                            <div class="old-price pull-left">$ 1,880,000</div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="pro-warp mt-24">
                            <div class="delete pull-left"><i class="iconfont iconbtn-delete"></i></div>
                            <div class="quantity-info pull-right">
                            <span class="qty">
                                    <input type="text" name="quantity" value="1" size="2" data-min-value="1" class="form-control">
                                    <a class="clearfix"></a>
                                </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="cart-item mt-30">
                    <div class="pro-img cell mr-16"><img src="./image/4.jpg" class="img-responsive"></div>
                    <div class="pro-info cell">
                        <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>
                        <div class="pro-option mt-5">M01_듀이 로즈</div>
                        <div class="pro-price mt-24">
                            <div class="new-price  pull-left">$ 1,316,000</div>
                            <div class="old-price pull-left">$ 1,880,000</div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="pro-warp mt-24">
                            <div class="delete pull-left"><i class="iconfont iconbtn-delete"></i></div>
                            <div class="quantity-info pull-right">
                            <span class="qty">
                                    <input type="text" name="quantity" value="1" size="2" data-min-value="1" class="form-control">
                                    <a class="clearfix"></a>
                                </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="cart-item mt-30">
                    <div class="pro-img cell mr-16"><img src="./image/5.jpg" class="img-responsive"></div>
                    <div class="pro-info cell">
                        <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection</div>
                        <div class="pro-option mt-5">M01_듀이 로즈</div>
                        <div class="pro-price mt-24">
                            <div class="price">$ 1,316,000</div>
                        </div>
                        <div class="pro-warp mt-24">
                            <div class="delete pull-left"><i class="iconfont iconbtn-delete"></i></div>
                            <div class="quantity-info pull-right">
                            <span class="qty">
                                    <input type="text" name="quantity" value="1" size="2" data-min-value="1" class="form-control">
                                    <a class="clearfix"></a>
                                </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="panel-group mt-20">
                <h2>What would you like to do next?</h2>
                <p>Choose if you have a discount code or reward points you want to use or would like to estimate your delivery cost.</p>
                <div class="panel-notice mt-30">
                    <div class="code">Use Coupon Code</div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-input mt-10">
                    <div class="code" style="position: relative">
                        <input name="code" type="text" class="form-control" autocomplete="off" value="12345678">
                        <i class="iconfont iconbtn-check"></i>
                    </div>

                </div>
                <div class="panel-notice mt-30">
                    <div class="code">Estimate Shipping & Taxes</div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-input mt-10">
                    <div class="code" style="position: relative">
                        <input type="text" class="form-control" autocomplete="off" value="China - Sichuan">
                    </div>
                </div>
            </div>
            <div class="panel-total mt-10">
                <div class="sub-total">
                    <div class="panel-title pull-left">Sub-total</div>
                    <div class="num pull-right">$1,316,000</div>
                    <div class="clearfix"></div>
                </div>
                <div class="coupon">
                    <div class="panel-title pull-left">Coupon</div>
                    <div class="num pull-right">-</div>
                    <div class="clearfix"></div>
                </div>
                <div class="shipping">
                    <div class="panel-title pull-left">Shipping</div>
                    <div class="num pull-right">-</div>
                    <div class="clearfix"></div>
                </div>
                <div class="taxes">
                    <div class="panel-title pull-left">Taxes</div>
                    <div class="num pull-right">-</div>
                    <div class="clearfix"></div>
                </div>
                <div class="total mt-10">
                    <div class="panel-title pull-left">Total</div>
                    <div class="num pull-right">$1,316,000</div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="buttons">
                <button type="button" class="btn btn-default pull-left">Shopping</button>
                <button type="button" class="btn btn-default btn-default-black pull-right">Checkout</button>
                <span class="clearfix"></span>
            </div>
        </div>
    </div>
</div>
<script>
    /* quantity buttons */
    var $input = $('.quantity-info input[name="quantity"]');
    function up() {
        var $input = $(this).prev('input');
        var val = parseInt($input.val(), 10) + 1 || parseInt($input.attr('data-min-value'), 10);
        $input.val(val);
    }
    function down() {
        var $input = $(this).next('input');
        var val = parseInt($input.val(), 10) - 1 || 0;
        var min = parseInt($input.attr('data-min-value'), 10) || 1;
        $input.val(Math.max(val, min));
    }

    $('<a href="javascript:;" class="journal-stepper">-</a>').insertBefore($input).click(down);
    $('<a href="javascript:;" class="journal-stepper">+</a>').insertAfter($input).click(up);
    $input.keydown(function (e) {
        if (e.which === 38) {
            up();
            return false;
        }
        if (e.which === 40) {
            down();
            return false;
        }
    });

    $(function () {
        $('.cart-item .delete').click(function () {
            var obj = $(this).parents('.cart-item');
            layer.msg('Are you sure you want to delete?', {
                time: 0 //不自动关闭
                ,btn: ['Yes', 'No']
                ,yes: function(index){
                    obj.remove();
                    layer.close(index);
                }
            });
        })
    })
</script>


<footer>
    <div class="row col-md-12 footer">
        <div class="box-heading mt-10"><a>My Account</a>&nbsp<i class="iconfont iconic-arrow"></i></div>
        <div class="box-heading mt-10"><a>Contact Us</a>&nbsp<i class="iconfont iconic-arrow"></i></div>
        <div class="border"></div>
        <p class="power">Komembers© 2019</p>
    </div>
</footer>
</body>
</html>

